<template>
  <!-- UniversalContainer是通用的组件展示容器 -->
  <div class="UniContainer">
    <div class="Unisubtitle">{{ props.name }}</div>
    <div class="UniDetails">
      <!-- 用slot插槽来展示组件 -->
      <slot></slot>
    </div>
    <!-- 展示示例代码 -->
    <div class="type" @click="showCode">
      <div
        class="paramaters"
        @mouseover="Onactive"
        @mouseout="Outactive"
        :class="{ actived: HighLighted }"
      >
        <div class="click">{{ tipsMsg }}</div>
        <div class="code" v-show="show">
          <pre class="language-html line-numbers">
            <div class="language-html line-numbers" v-html="html"></div>
        </pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import "../assets/style/prism.css";
// prismjs可以使代码高亮
import Prism from "prismjs";
import { ref } from "vue";
const props = defineProps({
  name: String,
  paramaters: String,
});
// 接收容器需要的代码
const name = ref(props.paramaters);
// 使用Prism.highlight对代码进行高亮
const html = Prism.highlight(
  name.value as string,
  Prism.languages.html,
  "html"
);
const show = ref(false);
const tipsMsg = ref("展示代码");
const showCode = () => {
  show.value = !show.value;
  if (tipsMsg.value === "收起代码") {
    tipsMsg.value = "展示代码";
  } else if (tipsMsg.value === "展示代码") {
    tipsMsg.value = "收起代码";
  }
};
const HighLighted = ref(false);
const Onactive = () => {
  HighLighted.value = !HighLighted.value;
};
const Outactive = () => {
  HighLighted.value = !HighLighted.value;
};
</script>

<style scoped lang="scss">
.actived {
  background-color: rgb(238, 238, 238);
}
.UniContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border: 1px solid rgb(160, 160, 160, 0.6);
  width: 100%;
  margin-bottom: 30px;
  .Unisubtitle {
    font-size: 26px;
    padding: 20px 20px 20px 50px;
    height: 100%;
    border-bottom: 1px solid rgba(160, 160, 160, 0.5);
    width: 100%;
  }
  .UniDetails {
    padding: 20px 20px 20px 60px;
    width: 100%;
    border-bottom: 1px solid rgba(160, 160, 160, 0.5);
  }
  .type {
    font-size: 18px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    .paramaters {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      .code {
        margin-top: 10px;
      }
      .click {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // margin: 0px 200px 0px 200px;
        height: 100%;
        width: 100%;
        font-size: 20px;
        font-weight: 600;
        color: rgb(93, 91, 212);
      }
    }
    .paramaters:nth-child(1) {
      padding: 15px;
    }
  }
}
</style>
